<template>
	<view class="login-container">
		<view class="back-icon" @click="goBack">
			<text class="iconfont">&#xe600;</text>
		</view>
		
		<view class="login-header">
			<text class="welcome-text">欢迎登录 星野</text>
			<text class="login-tip">{{ activeTab === 'login' ? '请输入账号密码登录' : '注册新账号' }}</text>
		</view>
		
		<view class="login-form">
			<!-- 切换标签 -->
			<view class="tab-container">
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'login' }" 
					@click="activeTab = 'login'"
				>登录</view>
				<view 
					class="tab-item" 
					:class="{ active: activeTab === 'register' }" 
					@click="activeTab = 'register'"
				>注册</view>
			</view>
			
			<!-- 登录表单 -->
			<view v-if="activeTab === 'login'">
				<!-- 用户名输入 -->
				<view class="input-group">
					<input 
						class="input-field" 
						type="text" 
						v-model="loginForm.username" 
						placeholder="请输入用户名"
					/>
				</view>
				
				<!-- 密码输入 -->
				<view class="input-group">
					<input 
						class="input-field" 
						type="password" 
						v-model="loginForm.password" 
						placeholder="请输入密码"
					/>
				</view>
				
				<!-- 登录按钮 -->
				<button class="submit-btn" @tap="handleLogin">登录</button>
			</view>
			
			<!-- 注册表单 -->
			<view v-if="activeTab === 'register'">
				<!-- 用户名输入 -->
				<view class="input-group">
					<input 
						class="input-field" 
						type="text" 
						v-model="registerForm.username" 
						placeholder="请输入用户名"
					/>
				</view>
				
				<!-- 密码输入 -->
				<view class="input-group">
					<input 
						class="input-field" 
						type="password" 
						v-model="registerForm.password" 
						placeholder="请输入密码"
					/>
				</view>
				
				<!-- 确认密码输入 -->
				<view class="input-group">
					<input 
						class="input-field" 
						type="password" 
						v-model="registerForm.confirmPassword" 
						placeholder="请确认密码"
					/>
				</view>
				
				<!-- 注册按钮 -->
				<button class="submit-btn" @tap="handleRegister">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import settingsManager from '@/store/settings.js';
	
	export default {
		data() {
			return {
				activeTab: 'login', // 默认显示登录表单
				loginForm: {
					username: '',
					password: ''
				},
				registerForm: {
					username: '',
					password: '',
					confirmPassword: ''
				},
				loading: false
			}
		},
		onLoad() {
			// 检查是否已登录
			if (settingsManager.isLoggedIn) {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo) {
					this.loginForm.username = userInfo.username || '';
				}
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 处理登录
			async handleLogin() {
				if (!this.loginForm.username || !this.loginForm.password) {
					uni.showToast({
						title: '请输入用户名和密码',
						icon: 'none'
					});
					return;
				}
				
				if (this.loading) return;
				this.loading = true;
				
				// 显示加载中
				uni.showLoading({
					title: '登录中...'
				});
				
				try {
					// 调用用户服务
					const result = await this.$req.user.login({
						username: this.loginForm.username,
						password: this.loginForm.password
					});
					
					uni.hideLoading();
					
					if (result.code === 200) {
						// 登录成功后保存用户信息
						const userInfo = {
							username: result.data.username,
							userId: result.data.userId,
							token: result.data.token,
							isLogin: true
						};
						
						// 使用SettingsManager管理登录状态
						settingsManager.login(userInfo);
						
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 跳转到首页
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 1500);
					} else {
						uni.showToast({
							title: result.message || '登录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			
			// 处理注册
			async handleRegister() {
				if (!this.registerForm.username || !this.registerForm.password || !this.registerForm.confirmPassword) {
					uni.showToast({
						title: '请填写完整注册信息',
						icon: 'none'
					});
					return;
				}
				
				if (this.registerForm.password !== this.registerForm.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				
				if (this.registerForm.username.length < 3) {
					uni.showToast({
						title: '用户名至少需要3个字符',
						icon: 'none'
					});
					return;
				}
				
				if (this.registerForm.password.length < 6) {
					uni.showToast({
						title: '密码至少需要6个字符',
						icon: 'none'
					});
					return;
				}
				
				if (this.loading) return;
				this.loading = true;
				
				// 显示加载中
				uni.showLoading({
					title: '注册中...'
				});
				
				try {
					// 调用用户服务
					const result = await this.$req.user.register({
						username: this.registerForm.username,
						password: this.registerForm.password
					});
					
					uni.hideLoading();
					
					if (result.code === 200) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						});
						
						// 注册成功后自动填充登录表单
						this.loginForm.username = this.registerForm.username;
						this.loginForm.password = this.registerForm.password;
						
						// 切换到登录页
						this.activeTab = 'login';
					} else {
						uni.showToast({
							title: result.message || '注册失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.hideLoading();
					uni.showToast({
						title: error.message || '注册失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		min-height: 100vh;
		background-color: var(--bg-color);
		color: var(--text-color);
		padding: 0 40rpx;
		position: relative;
	}
	
	.back-icon {
		position: absolute;
		top: 80rpx;
		left: 40rpx;
		font-size: 40rpx;
		color: var(--text-color);
	}
	
	.login-header {
		padding-top: 240rpx;
		margin-bottom: 80rpx;
		
		.welcome-text {
			font-size: 48rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.login-tip {
			font-size: 28rpx;
			color: var(--text-secondary);
		}
	}
	
	.login-form {
		.tab-container {
			display: flex;
			margin-bottom: 40rpx;
			
			.tab-item {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				color: var(--text-secondary);
				padding-bottom: 20rpx;
				position: relative;
				
				&.active {
					color: var(--text-color);
					font-weight: bold;
					
					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 60rpx;
						height: 4rpx;
						background-color: var(--primary-color);
						border-radius: 2rpx;
					}
				}
			}
		}
		
		.input-group {
			background-color: var(--card-bg);
			border-radius: 16rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			
			.input-field {
				flex: 1;
				height: 100%;
				font-size: 32rpx;
				color: var(--text-color);
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 100rpx;
			background-color: var(--primary-color);
			color: var(--text-color);
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 60rpx 0;
		}
	}
</style> 